<template>
  <div>
    <div class="title">
      <span>{{question}}</span>
    </div>
    <div class="a">
      <div class="xuanze">
        <mt-button
          :style="`width: 50px; height: 50px;margin-right: 30px; border-radius: 50%; border: none; background-color:${color1};`"  
          >A</mt-button>
        <span>{{item1}}</span>
      </div>
      <div class="xuanze">
        <mt-button
          :style="`width: 50px; height: 50px;margin-right: 30px; border-radius: 50%; border: none;  background-color:${color2};`"
          
          >B</mt-button
        >
        <span>{{item2 }}</span>
      </div>
      <div class="xuanze">
        <mt-button
          :style="`width: 50px; height: 50px;margin-right: 30px; border-radius: 50%; border: none;  background-color:${color3};`"
          
          >C</mt-button
        >
        <span>{{item3 }}</span>
      </div>
      <div class="xuanze">
        <mt-button
          :style="`width: 50px; height: 50px;margin-right: 30px; border-radius: 50%; border: none;  background-color:${color4};`"
          
          >D</mt-button
        >
        <span>{{item4 }}</span>
      </div>
    </div>
    <div class="jiexi">
      <span> 解析:{{explains}} </span>
    </div>
  </div>
</template>
<style scoped>
.title{
  margin-top: 40px;
}
.a {
  margin-top: 40px;
}
.a div {
  margin-bottom: 30px;
}
.topic {
  margin-right: 30px;
}
.a:hover + .jiexi {
  display: block;
}
.jiexi {
  margin-top: 40px;
  margin-left: 20px;
}
</style>
<script>
export default {
  data() {
    return {
      aid: "",
      question:'',
      item1:'',
      item2:'',
      item3:'',
      item4:'',
      explains:'',
      color1: "white",
      color2: "white",
      color3: "white",
      color4: "white",
    };
  },
  mounted() {
    //获取当前收藏题目
    let aid = this.$route.query.aid;
    // console.log(`aid:${aid}`);
    this.aid = aid;
    // console.log(this.aid);
    this.axios.get(`/test1?aid=${this.aid}`).then((result) => {
      // console.log(result);
      this.question = result.data.results[0].question;
      this.item1 = result.data.results[0].item1;
      this.item2 = result.data.results[0].item2;
      this.item3 = result.data.results[0].item3;
      this.item4 = result.data.results[0].item4;
      let answer = result.data.results[0].answer;
      // console.log(answer)
      this.explains = result.data.results[0].explains;
      
      if(answer=='1'){
        this.color1=`green`
      }else if(answer=='2'){
        this.color2=`green`
      }else if(answer=='3'){
         this.color3=`green`
      }else{
        this.color4=`green`
      }
      // console.log(this.color4)
      // console.log(answer)
      
    });
  },
};
</script>
